<template>
  <div>
    <div class="padding-lr40">
      <div class="rem-30px flex align-center padding-tb30 border-bottom">
        <div class="c-99 w-90 text-justify word-all">手机号</div>
        <div class="flex-grow padding-l60">
          <input type="text" name="phone" v-model="phone" placeholder="请输入手机号" />
        </div>
      </div>
      <div class="rem-30px flex align-center padding-tb30 border-bottom">
        <div class="c-99 w-90 text-justify">密码</div>
        <div class="flex-grow padding-l60">
          <input type="password" name="password" v-model="password" placeholder="请输入6-18位密码" />
        </div>
      </div>
      <div class="rem-30px flex align-center padding-tb30 border-bottom">
        <div class="c-99 w-120">确认密码</div>
        <div class="flex-grow padding-l30">
          <input
            type="password"
            name="repeat_password"
            @change="inspect"
            v-model="repeat_password"
            placeholder="请确认密码"
          />
        </div>
      </div>
      <!--  -->
      <div class="padding-lr28 margin-t40">
        <div class="sure text-center bg-ff0 text-ff" @click="sure">完成</div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      repeat_password: ""
    };
  },
  methods: {
    // 密码确定
    inspect() {
      if (this.password != this.repeat_password) {
        this.$toast("密码两次输入不正确");
        return false;
      }
    },
    sure() {
      if (this.password != this.repeat_password) {
        this.$toast("密码两次输入不正确");
        return false;
      }
      if (!this.phone || !this.password || !this.repeat_password) {
        this.$toast("信息不能为空");
        return false
      }
    }
  }
};
</script>

<style>
html {
  background: white;
}
</style>

<style scoped>
</style>